<template>
  <Page name="扣款顺序">
    <ui-loading v-if="initLoading" class="page-init-loading">
      <div slot="content"></div>
    </ui-loading>
    <div class="sort">
      <div class="head">
        <p>自定义扣款账户顺序</p>
        <p>系统将根据下面排列按顺序扣款 <span>拖动</span></p>
      </div>
      <div class="pay_ids-list">
        <div class="pay_ids-item item" v-for="(item,index) in pay_ids" v-dragging="{ item: item, list: pay_ids, group: 'item1'}"
            :key="item.text" :class="index==1 && !lbFlag ? 'default' : ''">
            {{item.text}}
            <span v-if="index==1 && !lbFlag">(您还未开通乐贝账户，请先完善资料)</span>
            <img src="~/assets/img/tuodong.png" />  
        </div>
      </div>
      <div class="head">
        <p>自定义扣款支付币种顺序与显示</p>
        <p>系统将根据下面排列按顺序扣款 <span>拖动</span></p>
      </div>
      <div class="pay_codes-list">
        <div class="pay_codes-item item" 
            v-for="item in pay_codes" v-dragging="{ item: item, list: pay_codes, group: 'item2' }"
            :key="item.name">{{item.name}}
            <img src="~/assets/img/tuodong.png">  
        </div>
      </div>
    </div>
  </Page>
</template>

<script>
import Page from '~/components/page';
import UILoading from  "~/components/loading";
export default {
  components: {
    Page,
    [UILoading.name]: UILoading,
  },
  data() {
    return {
      lbFlag:false,
      initLoading:true,
      pay_codes: [],
      pay_ids: [],
      pay_codes_arr:[],
      pay_ids_arr:[],
    }

  },
  mounted () {
    this.getDate();
    this.getStatus();

    this.$dragging.$on('dragged', ({ value }) => {
      this.pay_codes_arr = [];
      this.pay_ids_arr = [];
      if(value.group=="item1"){
        for(var i=0;i<value.list.length;i++){
          this.pay_ids_arr.push(value.list[i].key) 
        }
        for(var i=0;i<this.pay_codes.length;i++){
          this.pay_codes_arr.push(this.pay_codes[i].code) ;
        }
      }else{
        for(var i=0;i<value.list.length;i++){
          this.pay_codes_arr.push(value.list[i].code) ;
        }
        for(var i=0;i<this.pay_ids.length;i++){
          this.pay_ids_arr.push(this.pay_ids[i].key) ;
        }
      }
      
      
    })
    this.$dragging.$on('dragend', () => {
        this.sort(this.pay_ids_arr,this.pay_codes_arr);
    })
  },
  methods: {
    async getDate(){
        let { data:rs } = await this.$axios.post('?ct=api&ac=get_pay_seq')
        if(rs.code == 0){
          this.pay_codes=rs.data.pay_codes;
          this.pay_ids=rs.data.pay_ids;
        }else{
          this.$toast(rs.msg);
        }
        this.initLoading = false;
    },
    async getStatus(){
      let { data:rs } = await this.$axios.post('?ct=api&ac=check_credit')
      if(rs.code == 0){
        if(rs.data.state==1){
          this.lbFlag = true;
        }else{
          this.lbFlag = false;
          setTimeout(function(){
            document.getElementsByClassName("pay_ids-item")[0].setAttribute("draggable","false");
            document.getElementsByClassName("pay_ids-item")[1].setAttribute("draggable","false");
            document.getElementsByClassName("pay_ids-item")[0].removeAttribute("drag_block");
            document.getElementsByClassName("pay_ids-item")[1].removeAttribute("drag_block");
          },1000)
        }
      }else{
        this.$toast(rs.msg);
      }
      this.initLoading = false;
    },
    async sort(ids,codes){
      let params = {
        pay_ids : ids.join(","),
        pay_codes : codes.join(","),
      }
      let { data:rs } = await this.$axios.post('?ct=api&ac=set_pay_seq',params);

      if(rs.code == 0){
        if(rs.data.state>0){
          this.$toast('修改成功');
          //window.history.go(-1);
        }else{
          this.$toast(rs.msg);
        }
        
      }else{
        this.$toast(rs.msg);
      }
      this.initLoading = false;
    },
  }
}
</script>

<style lang="less" scoped>
.sort{
  .item{
    border-bottom:1px solid #ededed;
    padding:0px 30px;
    line-height: 112px;
    background: #fff;
    font-size:32px;
    &:last-child{
      border-bottom:0;
    }
    img{
      float: right;
      width:34px;
      height:16px;
      margin-top:48px;
    }
  }
  .default{
    color:#999;
    span{
      font-size:28px;
    }
    img{
      display: none;
    }
  }
  .head{
    margin-top:30px;
    background: #fff;
    p{
      color:#292929;
      line-height: 112px;
      padding:0 30px;
      border-bottom:1px solid #ededed;
      font-size:32px;
      &:last-child{
        color:#999;
        span{
          float: right;
        }
      }
    }
  }
}

</style>
